<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>今天吃什么 - 首页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
    }
  </style>
</head>
<body class="pb-16">
  <!-- 引入组件模板 -->
  <iframe src="components.html" class="hidden" id="components-frame"></iframe>
  
  <!-- 顶部搜索栏 -->
  <div class="bg-white shadow-sm px-4 py-3 sticky top-0 z-10">
    <div class="flex items-center">
      <div class="flex-1 relative">
        <input type="text" placeholder="搜索美食、餐厅..." class="w-full bg-gray-100 rounded-full py-2 pl-10 pr-4 text-sm focus:outline-none">
        <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
      </div>
      <button class="ml-3 text-gray-600">
        <i class="fas fa-bell text-xl"></i>
      </button>
    </div>
  </div>
  
  <!-- 位置选择 -->
  <div class="px-4 py-2 flex items-center">
    <div class="flex items-center text-sm">
      <i class="fas fa-map-marker-alt text-orange-500 mr-1"></i>
      <span class="font-medium">公司附近</span>
      <i class="fas fa-chevron-down text-xs ml-1 text-gray-500"></i>
    </div>
    <div class="ml-auto text-xs text-gray-500">
      <i class="fas fa-clock mr-1"></i>
      <span>午餐时间</span>
    </div>
  </div>
  
  <!-- 快速决策按钮 -->
  <div class="bg-white rounded-lg mx-4 my-3 p-4 shadow-sm">
    <h2 class="text-lg font-medium mb-3">今天吃什么？</h2>
    <div class="flex justify-between">
      <a href="random.html" class="flex-1 bg-orange-500 text-white py-3 rounded-lg text-center mr-2 shadow-sm">
        <i class="fas fa-dice mr-1"></i> 随机推荐
      </a>
      <a href="filter.html" class="flex-1 bg-white border border-orange-500 text-orange-500 py-3 rounded-lg text-center ml-2 shadow-sm">
        <i class="fas fa-filter mr-1"></i> 条件筛选
      </a>
    </div>
  </div>
  
  <!-- 分类导航 -->
  <div class="px-4 py-3">
    <div class="grid grid-cols-5 gap-3">
      <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-1">
          <i class="fas fa-utensils text-red-500"></i>
        </div>
        <span class="text-xs">中餐</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-1">
          <i class="fas fa-hamburger text-blue-500"></i>
        </div>
        <span class="text-xs">西餐</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-1">
          <i class="fas fa-fish text-green-500"></i>
        </div>
        <span class="text-xs">日料</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-1">
          <i class="fas fa-pepper-hot text-yellow-600"></i>
        </div>
        <span class="text-xs">川菜</span>
      </div>
      <div class="flex flex-col items-center">
        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-1">
          <i class="fas fa-ellipsis-h text-purple-500"></i>
        </div>
        <span class="text-xs">更多</span>
      </div>
    </div>
  </div>
  
  <!-- 附近推荐 -->
  <div class="px-4 py-2">
    <div class="flex justify-between items-center mb-3">
      <h2 class="text-lg font-medium">附近热门</h2>
      <a href="#" class="text-sm text-gray-500">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
    </div>
    
    <div class="space-y-4" id="food-cards-container">
      <!-- 食物卡片将通过JS插入 -->
    </div>
  </div>
  
  <!-- 底部导航栏 -->
  <div id="bottom-nav"></div>
  
  <script>
    // 等待组件iframe加载完成
    document.getElementById('components-frame').onload = function() {
      const componentsDoc = document.getElementById('components-frame').contentDocument;
      
      // 插入底部导航
      const bottomNavTemplate = componentsDoc.getElementById('bottom-nav-template');
      document.getElementById('bottom-nav').innerHTML = bottomNavTemplate.innerHTML;
      
      // 设置当前页面导航项为活跃状态
      const homeLink = document.querySelector('#bottom-nav a[href="home.html"]');
      const homeIcon = homeLink.querySelector('i');
      const homeText = homeLink.querySelector('span');
      homeIcon.classList.replace('text-gray-400', 'text-orange-500');
      homeText.classList.replace('text-gray-600', 'text-orange-500');
      
      // 插入食物卡片
      const foodCardTemplate = componentsDoc.getElementById('food-card-template');
      const foodCardsContainer = document.getElementById('food-cards-container');
      
      // 创建3个示例卡片
      for (let i = 0; i < 3; i++) {
        const foodCard = document.createElement('div');
        foodCard.innerHTML = foodCardTemplate.innerHTML;
        
        // 修改一些内容以区分卡片
        const foods = [
          {
            name: "香辣牛肉面",
            price: "¥28",
            time: "15分钟",
            type: "中式面食",
            img: "https://images.unsplash.com/photo-1555126634-323283e090fa",
            tag: "午餐热门"
          },
          {
            name: "意式肉酱披萨",
            price: "¥58",
            time: "25分钟",
            type: "意式料理",
            img: "https://images.unsplash.com/photo-1513104890138-7c749659a591",
            tag: "同事最爱"
          },
          {
            name: "日式照烧鸡饭",
            price: "¥32",
            time: "12分钟",
            type: "日式料理",
            img: "https://images.unsplash.com/photo-1569058242567-93de6c36f198",
            tag: "快速送达"
          }
        ];
        
        const food = foods[i];
        foodCard.querySelector('h3').textContent = food.name;
        foodCard.querySelector('p').textContent = `${food.price} · ${food.time} · ${food.type}`;
        foodCard.querySelector('img').src = food.img;
        foodCard.querySelector('.bg-orange-100').textContent = food.tag;
        
        foodCardsContainer.appendChild(foodCard);
      }
    };
  </script>
</body>
</html>